<template>
	<view class="body">
		<ComHeader :backBtn='backBtn' title='软件更新'></ComHeader>
		<image src="/static/img/login-bottom.png" class="bg-img" mode="widthFix"></image>
		<image src="/static/img/logo.png" class="logo" mode=""></image>
		<text class="app-name">云盟商桥</text>
		<text class="update-title">更新信息</text>
		<!-- <text class="note">1. 更新使用体验，使用更畅快，更有好礼相送\n 2. 优化部分功能\n 3. 新增XX功能，修复若干BUG\n 4. XX功能全面升级 </text> -->
		<view class="version-info">
			<text >版本：v{{version}}</text>
			<text >大小：{{size}}M</text>
			<text >更新时间： {{update_time}}</text>
			<text >内容：</text>
			<text class="note">{{note}}</text>
		</view>
		<view class="download-slider" v-if="downloading">
			<view class="download-slider-in" :style="{width:progress/100*610 +'rpx'}"></view>
			<text>{{totalBytesWritten}}M/{{totalBytesExpectedToWrite}}M</text>
		</view>
		<view :class="['btn',downloading?'disabled':'']" @click="download">
			<image src="/static/img/login.png" mode=""></image>
			<text>{{downloading?'下载中':'立即更新'}}</text>
		</view>
	</view> 
</template>

<script>
	import ComHeader from '@/components/ComHeader.vue'
	export default{
		data(){
			return{
				downloading:false,
				url:'',
				note:'',
				version:'',
				size:'',
				update_time:'',
				progress:0,
				totalBytesWritten:0,
				totalBytesExpectedToWrite:0
			}
		},
		onLoad(option) {
			this.url = option.url
			this.note = option.note
			this.version = option.version
			this.size = option.size
			this.update_time = option.update_time
		},
		onBackPress(options) {
		    if(this.downloading)return true
		},
		methods:{
			backBtn(){
				if(!this.downloading){
					uni.navigateBack({
						delta:1
					})
				}else{
					return
				}
			},
			download(){
				if(this.downloading)return
				this.downloading = true
				var that = this
				var downloadApkUrl = this.url;
				const downloadTask = uni.downloadFile({
				    url: downloadApkUrl, //仅为示例，并非真实的资源
				    success: (res) => {
				        if (res.statusCode === 200) {
							uni.navigateBack({
								delta:1
							})
				         
							plus.runtime.install(res.tempFilePath,{},{},function(error){
							    uni.showToast({  
							        title: '安装失败', 
							        duration: 1500  
							    });  
							})
				        }
				    },fail: (res) => {
				    	 console.log(res);
				    }
				});
				downloadTask.onProgressUpdate((res) => {
				    // console.log('下载进度' + res.progress);
				    // console.log('已经下载的数据长度' + res.totalBytesWritten);
				    // console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
					that.progress = res.progress
					that.totalBytesWritten = parseFloat(res.totalBytesWritten/1024/1024).toFixed(2)
					that.totalBytesExpectedToWrite = parseFloat(res.totalBytesExpectedToWrite/1024/1024).toFixed(2)
				});
			},
		},
		components:{
			ComHeader
		}
	}
</script>

<style scoped>
	.body{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.bg-img{
		position: absolute;
		width: 100%;
		height: 100vh;
		z-index: 0;
		bottom: 0;
	}
	.logo{
		width: 100rpx;
		height: 100rpx;
		margin-top: 15vh;
	}
	.app-name{
		font-size:44rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		margin-top: 30rpx;
	}
	.update-title{
		font-size:36rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		margin-top: 80rpx;
	}
	.version-info{
		width: 610rpx;
		height: auto;
		display: table;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		margin-top: 50rpx;
		z-index: 10;
	}
	.version-info text{
		margin-top: 10rpx;
	}
	.note{
		width: 580rpx;
		/* background-color: #2C405A; */
		margin-left: 15rpx;
		height: auto;
		display: table;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		
	}
	.download-slider{
		width: 610rpx;
		height: 40rpx;
		border: #ffbd2d 1rpx solid;
		background-color: #FFF7E3;
		border-radius: 10rpx;
		overflow: hidden;
		position: absolute;
		bottom: 20vh;
	}
	.download-slider-in{
		position: absolute;
		top: 0;
		left: 0;
		width: 400rpx;
		height: 40rpx;
		background-color: #ffbd2d;
	}
	.download-slider text{
		width: 610rpx;
		height: 40rpx;
		display: block;
		position: absolute;
		text-align: center;
		line-height: 40rpx;
		color: #000000;
		font-size:30rpx;
		font-family:PingFang SC;
	}
	.btn{
		width: 390rpx;
		height: 88rpx;
		position: absolute;
		bottom: 10vh;
	}
	.btn image{
		width: 390rpx;
		height: 88rpx;
		position: absolute;
	}
	.btn text{
		width: 390rpx;
		height: 88rpx;
		position: absolute;
		display: table;
		text-align: center;
		line-height: 88rpx;
		font-size:36rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:#FFFFFF;
	}
	.disabled{
		-webkit-filter: grayscale(100%); 
		-moz-filter: grayscale(100%); 
		-ms-filter: grayscale(100%); 
		-o-filter: grayscale(100%); 
		filter: grayscale(100%); 
		filter: gray; 
	}
</style>
